
import React from 'react';
import { useNavigate, NavLink } from 'react-router-dom';
import './index.css';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, ConfigProvider, message, Modal } from 'antd';
import axios from 'axios';

const App = () => {
  const navigate = useNavigate();
  const onFinish = async (values) => {
    const { username, password, agree } = values;
    console.log(values);
    if (password.length < 6) {
      message.error('密码长度不能少于6个字符');
    } else if(agree){
      try {
        const response = await axios.post('http://localhost:3000/login', {
          username,
          password,
          agree
        });

        if (response.data.success) {
          navigate(`/home/${username}`);
        }

      } catch (error) {
        console.error('登录请求出错：', error);
        Modal.error({
          title: '登录失败',
          content: '账号或密码错误！',
        });
      }
    }else {
      Modal.error({
        content: '请勾选隐私保护协议',
      });
    }
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#30B30E',
          borderRadius: 2,
          colorBgContainer: '#f6ffed',
        },
      }}
    >
      <div className="login_form_big">
        <div className="logo">
       
        </div>

        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            agree: false,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入您的账号/Email/手机号!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号/Email/手机号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入您的密码！',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="agree" valuePropName="checked" noStyle>
              <Checkbox>我已阅读并同意《用户隐私保护协议》</Checkbox>
            </Form.Item>
            <a className="login_text" href="">
              忘记密码
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
          <NavLink className="login_text" to="adduser">
            没有账号？
          </NavLink>
        </Form>
      </div>
    </ConfigProvider>
  );
};

export default App;
